import React, {useEffect, useLayoutEffect} from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import DetailsScreen from 'pages/DetailScreen/Details/Details';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import Participants from 'pages/DetailScreen/Participants';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {Image} from 'react-native-elements';
import {LayoutAnimation, StyleSheet, Text, View} from 'react-native';
import {useDispatch, useSelector} from 'react-redux';
import {selectActiveTab, selectEventDetail} from 'reduxState/selectors';
import Comments from 'pages/DetailScreen/Comments';
import DetailSummary from 'pages/DetailScreen/DetailSummary';
import Bottom from 'pages/DetailScreen/Details/Bottom';
import service from 'service';
import actions from 'reduxState/actions';
export type TabParamList = {
  Details: undefined;
  Participants: undefined;
  Comments: undefined;
  [key: string]: undefined;
};

const {Navigator, Screen} = createMaterialTopTabNavigator<TabParamList>();
export interface Props {
  navigation: any;
  route: any;
}
type ActionType = {
  [key: string]: (param: string) => void;
};
function TabNavigator({navigation, route}: Props) {
  const activeTab = useSelector(selectActiveTab);
  const detailInfo = useSelector(selectEventDetail);
  const dispatch = useDispatch();
  //LayoutAnimation.linear();
  // 设置顶部右侧导航
  useLayoutEffect(() => {
    navigation.setOptions({
      headerLeft: () => (
        <TouchableOpacity
          style={styles.headerIconContainer}
          onPress={() => {
            navigation.goBack();
          }}>
          <Image
            style={styles.headerIcon}
            source={require('assets/icons/home.png')}
          />
        </TouchableOpacity>
      ),
    });
  }, [navigation]);

  const btnActions: ActionType = {
    comment: async (param: string) => {
      if (detailInfo) {
        try {
          // TODO: 刷新数据
          await service.addComment(detailInfo.id, param);
          const {data} = await service.getEventDetail(detailInfo.id);
          dispatch(actions.setDetail(data.event));
        } catch (error) {}
      }
    },
    like: async () => {
      if (detailInfo) {
        try {
          // TODO: 刷新数据
          if (detailInfo.me_likes) {
            await service.dellikeEvent(detailInfo.id);
          } else {
            await service.likeEvent(detailInfo.id);
          }
        } catch (error) {
          console.log('chucuo', error);
        }
        const {data} = await service.getEventDetail(detailInfo.id);
        dispatch(actions.setDetail(data.event));
      }
    },
    going: async () => {
      if (detailInfo) {
        try {
          // TODO: 刷新数据
          if (detailInfo.me_going) {
            await service.delJoinEvent(detailInfo.id);
          } else {
            await service.joinEvent(detailInfo.id);
          }
        } catch (error) {
          console.log('chucuo', error);
        }
        const {data} = await service.getEventDetail(detailInfo.id);
        dispatch(actions.setDetail(data.event));
      }
    },
  };
  return (
    <>
      {activeTab === 'Details' && (
        <View style={styles.borderBtLine}>
          <DetailSummary detailInfo={detailInfo}>内容</DetailSummary>
        </View>
      )}
      <Navigator
        initialRouteName={activeTab}
        tabBarOptions={{
          activeTintColor: '#AECB4F',
          inactiveTintColor: '#8C8C8C',
          labelStyle: {
            fontSize: 12,
            lineHeight: 12,
          },
          showIcon: true,
          indicatorStyle: {
            height: 0,
          },
          tabStyle: {
            flexDirection: 'row',
          },
          iconStyle: {
            height: 18,
            marginRight: -4,
          },
          //style: {backgroundColor: 'powderblue'},
        }}>
        <Screen
          name="Details"
          component={DetailsScreen}
          options={{
            tabBarLabel: 'Details',
            tabBarIcon: ({focused, color}) => {
              return <Icon name="info-circle" size={18} color={color} />;
            },
          }}
        />
        <Screen
          name="Participants"
          component={Participants}
          options={{
            tabBarLabel: 'Participants',
            tabBarIcon: ({focused, color}) => {
              return <Icon name="users" size={18} color={color} />;
            },
          }}
        />
        <Screen
          name="Comments"
          component={Comments}
          options={{
            tabBarLabel: 'Comments',
            tabBarIcon: ({focused, color}) => {
              return <Icon name="comments" size={18} color={color} />;
            },
          }}
        />
      </Navigator>
      <Bottom
        meLike={detailInfo?.me_likes}
        meGoing={detailInfo?.me_going}
        onPress={async (type, pyload) => {
          console.log('点击按钮', type, pyload);
          btnActions[type](pyload);
        }}
      />
    </>
  );
}

export default TabNavigator;
const styles = StyleSheet.create({
  borderBtLine: {
    borderBottomColor: '#E8E8E8',
    borderBottomWidth: 1,
    borderStyle: 'solid',
  },
  headerIconContainer: {
    paddingLeft: 20,
  },
  headerIcon: {
    width: 24,
    height: 24,
  },
});
